import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Navigation } from "@/components/navigation";
import { SearchRides } from "@/components/search-rides";
import { PopularRoutes } from "@/components/popular-routes";
import { HowItWorks } from "@/components/how-it-works";

export default function Home() {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      
      <main>
        {/* Hero Section */}
        <section className="relative h-[600px] flex items-center justify-center">
          <div 
            className="absolute inset-0 z-0"
            style={{
              backgroundImage: "url('https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')",
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }}
          >
            <div className="absolute inset-0 bg-black/50" />
          </div>
          
          <div className="relative z-10 container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center text-white">
              <h1 className="text-5xl font-bold mb-6">便捷的拼车服务</h1>
              <p className="text-xl mb-8">安全、经济、环保的出行方式</p>
              <SearchRides />
            </div>
          </div>
        </section>

        {/* Popular Routes */}
        <PopularRoutes />

        {/* How it Works */}
        <HowItWorks />
      </main>
    </div>
  );
}